import { Button, Layout, Radio,Divider,Row,Col,Space  } from 'antd'
import React, { useEffect, useState } from 'react'
import Carousel from './components/Carousel'
import styles from  './style.module.scss'
const { Content, Header, Sider } = Layout
//小主题颜色
const littleThemeColor=[]
const Index = (props: any) => {
  const { setldTheme ,setData} = props
  //默认选中
  const [defaultValue, setdefaultValue] = useState<any>('light')
  const [littleDefaultValue, setlittleDefaultValue] = useState<any>('#4e7c72')
  useEffect(() => {
    //持久化主题获取
    const VALUE = localStorage.getItem('ldTheme')
    VALUE ? setdefaultValue(VALUE) : null
    const littleVALUE = localStorage.getItem('littleTheme')
    littleVALUE ? setlittleDefaultValue(littleVALUE) : null
  }, [])
  return (<Layout >
    <Content
      style={{
        padding: 0,
        margin: 0,
        minHeight: 280,
        // background:defaultValue==='light'?'#f5f5f5':'#141414',
        color:defaultValue==='light'?'black':'white'
      }}
    >
      <Layout style={{padding:0,}}>
        <Header style={{  padding: '0' }} className={styles.welcomeContent}>
        <Space style={{marginLeft:'10px'}} >
          <Radio.Group value={defaultValue} buttonStyle="solid" onChange={(e) => {
            setldTheme(e.target.value)
            setdefaultValue(e.target.value)
            localStorage.setItem('ldTheme', e.target.value)
          }}>
            <Radio.Button value="light">白天模式</Radio.Button>
            <Radio.Button value="dark" >黑天模式</Radio.Button>
          </Radio.Group>

          小范围主题:
          <Radio.Group value={littleDefaultValue} buttonStyle="solid" onChange={(e) => {
            setlittleDefaultValue(e.target.value)
            localStorage.setItem('littleTheme', e.target.value)
            setData({
              borderRadius: 6,
              colorPrimary: e.target.value,
            })
          }}>
            <Radio.Button value="#a3282d">红</Radio.Button>
            <Radio.Button value="#aa401d" >橙</Radio.Button>
            <Radio.Button value="#fbba54" >黄</Radio.Button>
            <Radio.Button value="#4e7c72" >绿</Radio.Button>
            <Radio.Button value="#8d9bc0" >蓝</Radio.Button>
            <Radio.Button value="#232e4c" >靛</Radio.Button>
            <Radio.Button value="#8e96c4" >紫</Radio.Button>
          </Radio.Group>
          </Space>
        </Header>
      </Layout>
      <Layout style={{height:'100%'}}>
          <Content style={{height:'100%'}} className={styles.welcomeContent}>
            <Carousel/>
          </Content>
      </Layout>
    </Content>
  </Layout>)
}

export default Index